<template>
  <div class="surgery-detail">
    <div class="block">
      <header>
        <h2>手术跟台消耗单信息</h2>
      </header>
      <section class="step">
        <div class="orderDetail">
          <p>订单编号：{{ orderDetail.orderCode }}</p>
          <p>供应商：{{ orderDetail.supplierName }}</p>
          <p>合同名称：{{ orderDetail.contractName }}</p>
          <p>手术类型：{{ orderDetail.operationType }}</p>
        </div>
      </section>
    </div>
    <div class="block">
      <header>
        <h2>收货人信息</h2>
      </header>
      <section>
        <el-row>
          <el-col :span="4">收货联系人：{{consigneeInfo.addressee}}</el-col>
          <el-col
            :span="10"
          >收货地址：{{consigneeInfo.province}}{{consigneeInfo.city}}{{consigneeInfo.area}}{{consigneeInfo.detail}}</el-col>
          <el-col :span="8">联系电话：{{consigneeInfo.addressPhone}}</el-col>
          <el-col :span="5">运费承担方：{{orderDetail.freight}}</el-col>
        </el-row>
      </section>
    </div>
    <div class="block surgeryInfo">
      <section class="orderTab">
        <div v-for="(item, index) in order_tab" :key="index" class="detail">
          <p :class="{ active: activeIndex === index }" @click="changeIndex(index)">{{ item.title }}</p>
          <div v-show="activeIndex === index">
            <el-editable :columns="item.columns" :data="item.tabData"></el-editable>
          </div>
        </div>
      </section>
    </div>
    <div class="block">
      <header>
        <h2>手术信息</h2>
      </header>
      <section>
        <el-row>
          <el-col :span="5">手术医院：{{orderOperation.hospName}}</el-col>
          <el-col :span="5">分仓信息：{{orderOperation.operationHouseName}}</el-col>
          <el-col :span="5">手术医生：{{orderOperation.operationDoc}}</el-col>
          <el-col :span="9">手术日期：{{orderOperation.operationDate}}</el-col>
          <el-col :span="5">患者症状：{{orderOperation.symptom}}</el-col>
          <el-col :span="5">患者性别：{{orderOperation.sex}}</el-col>
          <el-col :span="5">患者姓名：{{orderOperation.name}}</el-col>
        </el-row>
      </section>
    </div>
    <div class="block">
      <header>
        <h2>备注</h2>
      </header>
      <section>
        <p>{{orderDetail.remark?orderDetail.remark:"无"}}</p>
      </section>
    </div>
  </div>
</template>
<script src="./index.js"></script>

<style lang="less" src="./index.less" scoped></style>
